<!-- Vue SFC -->
<template>
  <div id="app">
    <Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
      <FormItem prop="curseName" label="课程名称">
        <Input type="text" v-model="formInline.curseName" placeholder="课程名称">
        </Input>
      </FormItem>
      <FormItem prop="title" label="课程图像">
        <Upload action="http://localhost:8300/curse/uploadFile" :on-success="handleSuccess">
          <Button icon="ios-cloud-upload-outline">上传课程图像</Button>
        </Upload>
      </FormItem>
      <FormItem prop="score" label="学分">
        <Input type="text" v-model="formInline.score" placeholder="学分">
        </Input>
      </FormItem>
      <FormItem prop="place" label="地址">
        <Input type="text" v-model="formInline.place" placeholder="地址">
        </Input>
      </FormItem>
      <FormItem prop="duration" label="课程时长">
        <Input type="text" v-model="formInline.duration" placeholder="课程时长">
        </Input>
      </FormItem>
      <FormItem prop="startTime" label="起始周期">
        <Input type="text" v-model="formInline.startTime" placeholder="起始周期">
        </Input>
      </FormItem>
      <FormItem prop="endTime" label="结束周期">
        <Input type="text" v-model="formInline.endTime" placeholder="结束周期">
        </Input>
      </FormItem>
      <FormItem prop="curseWeek" label="单双周">
        <RadioGroup v-model="formInline.curseWeek">
          <Radio label="单周">单周</Radio>
          <Radio label="双周">双周</Radio>
        </RadioGroup>
      </FormItem>
      <FormItem prop="whether" label="是否必修">
        <RadioGroup v-model="formInline.whether">
          <Radio label="必修">必修</Radio>
          <Radio label="选修">选修</Radio>
        </RadioGroup>
      </FormItem>
      <FormItem prop="value" label="上课时间">
        <treeselect v-model="formInline.value" :multiple="true" :options="options "/>
      </FormItem>
      <FormItem>
        <Button type="success" @click="handleSubmit('formInline')">保存</Button>
      </FormItem>
    </Form>

  </div>
</template>

<script>
// import the component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
  // register the component
  components: {Treeselect},
  data() {
    return {
      formInline: {
        curseName: '',
        teacherId: '',
        score: '',
        place: '',
        curseWeek: '',
        whether: '',
        title: '',
        duration:'',
        startTime:'',
        endTime:'',
        value:null
      },
      ruleInline: {
        curseName: [
          {required: true, message: '请输入课程名称', trigger: 'blur'}
        ]
      },
      // define options
      options: [{
        id: '1',
        label: '周一',
        children: [{
          id: '10',
          label: '第一节',
        }, {
          id: '11',
          label: '第二节',
        }, {
          id: '12',
          label: '第三节',
        }, {
          id: '13',
          label: '第四节',
        }, {
          id: '14',
          label: '第五节',
        }, {
          id: '15',
          label: '第六节',
        }, {
          id: '16',
          label: '第七节',
        }, {
          id: '17',
          label: '第八节',
        }, {
          id: '18',
          label: '第九节',
        }, {
          id: '19',
          label: '第十节',
        }],
      }, {
        id: '2',
        label: '周二',
        children: [{
          id: '20',
          label: '第一节',
        }, {
          id: '21',
          label: '第二节',
        }, {
          id: '22',
          label: '第三节',
        }, {
          id: '23',
          label: '第四节',
        }, {
          id: '24',
          label: '第五节',
        }, {
          id: '25',
          label: '第六节',
        }, {
          id: '26',
          label: '第七节',
        }, {
          id: '27',
          label: '第八节',
        }, {
          id: '28',
          label: '第九节',
        }, {
          id: '29',
          label: '第十节',
        }],
      }, {
        id: '3',
        label: '周三',
        children: [{
          id: '30',
          label: '第一节',
        }, {
          id: '31',
          label: '第二节',
        }, {
          id: '32',
          label: '第三节',
        }, {
          id: '33',
          label: '第四节',
        }, {
          id: '34',
          label: '第五节',
        }, {
          id: '35',
          label: '第六节',
        }, {
          id: '36',
          label: '第七节',
        }, {
          id: '37',
          label: '第八节',
        }, {
          id: '38',
          label: '第九节',
        }, {
          id: '39',
          label: '第十节',
        }],
      }, {
        id: '4',
        label: '周四',
        children: [{
          id: '40',
          label: '第一节',
        }, {
          id: '41',
          label: '第二节',
        }, {
          id: '42',
          label: '第三节',
        }, {
          id: '43',
          label: '第四节',
        }, {
          id: '44',
          label: '第五节',
        }, {
          id: '45',
          label: '第六节',
        }, {
          id: '46',
          label: '第七节',
        }, {
          id: '47',
          label: '第八节',
        }, {
          id: '48',
          label: '第九节',
        }, {
          id: '49',
          label: '第十节',
        }],
      }, {
        id: '5',
        label: '周五',
        children: [{
          id: '50',
          label: '第一节',
        }, {
          id: '51',
          label: '第二节',
        }, {
          id: '52',
          label: '第三节',
        }, {
          id: '53',
          label: '第四节',
        }, {
          id: '54',
          label: '第五节',
        }, {
          id: '55',
          label: '第六节',
        }, {
          id: '56',
          label: '第七节',
        }, {
          id: '57',
          label: '第八节',
        }, {
          id: '58',
          label: '第九节',
        }, {
          id: '59',
          label: '第十节',
        }],
      }, {
        id: '6',
        label: '周六',
        children: [{
          id: '60',
          label: '第一节',
        }, {
          id: '61',
          label: '第二节',
        }, {
          id: '62',
          label: '第三节',
        }, {
          id: '63',
          label: '第四节',
        }, {
          id: '64',
          label: '第五节',
        }, {
          id: '65',
          label: '第六节',
        }, {
          id: '66',
          label: '第七节',
        }, {
          id: '67',
          label: '第八节',
        }, {
          id: '68',
          label: '第九节',
        }, {
          id: '69',
          label: '第十节',
        }],
      }, {
        id: '7',
        label: '周一',
        children: [{
          id: '70',
          label: '第一节',
        }, {
          id: '71',
          label: '第二节',
        }, {
          id: '72',
          label: '第三节',
        }, {
          id: '73',
          label: '第四节',
        }, {
          id: '74',
          label: '第五节',
        }, {
          id: '75',
          label: '第六节',
        }, {
          id: '76',
          label: '第七节',
        }, {
          id: '77',
          label: '第八节',
        }, {
          id: '78',
          label: '第九节',
        }, {
          id: '79',
          label: '第十节',
        }],
      }],
    }
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.formInline.curseWeek=this.formInline.curseWeek=="单周"
          this.formInline.whether=this.formInline.whether=="必修"
          this.formInline.teacherId=this.$store.getters.getDemoValue.teacherId
          this.$http.post('http://localhost:8300/curse/addCurse', this.formInline)
            .then((response) => {
              this.$Message.success('Success!');
            })
            .catch((error) => {
              this.$Message.success('fail!');
            });
        } else {
          this.$Message.error('Fail!');
        }
      })
    },
    handleSuccess(res, file) {
      this.formInline.title = res;
    },
  },

}
</script>
